<template>
  <!-- 手工选题 -->
  <el-dialog :model-value="props.visible" :title="props.title" width="1000px" align-center destroy-on-close @close="handleClose">
    <div class="grille-container">
      <!-- 目录 -->
      <cascader-catalog v-model:category-id="query.categoryId" :category-type="3" @refresh="handlePage" />
      <div class="main-container dialog-container">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane :key="0" :label="'全部'" :name="0" />
          <el-tab-pane v-for="item in tabPanes" :key="item.code" :label="item.desc" :name="item.code" />
        </el-tabs>
        <el-form :model="query" class="filter-container" inline label-width="70px">
          <el-form-item>
            <el-button v-permission="'question:save'" type="primary" @click="toQuestionAdd()">添加试题</el-button>
          </el-form-item>
          <el-form-item label="试题名称">
            <el-input v-model="query.questionName" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table ref="tableRef" v-loading="page.loading" :data="page.list">
          <el-table-column type="selection" width="30" />
          <el-table-column label="试题名称" prop="questionTitle">
            <template #default="scope">
              <div v-html="scope.row.questionTitle"></div>
            </template>
          </el-table-column>
          <el-table-column :min-width="20" label="题型" prop="questionType">
            <template #default="scope">
              <enum-view :enum-name="'QuestionType'" :enum-value="scope.row.questionType" />
            </template>
          </el-table-column>
          <el-table-column :min-width="20" label="难度" prop="difficultyLevel">
            <template #default="scope">
              <enum-view :enum-name="'DifficultyLevel'" :enum-value="scope.row.difficultyLevel" />
            </template>
          </el-table-column>
        </el-table>
        <common-pagination v-model:page="page" @pagination="handlePage" />
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="handleSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import useTable from '@/utils/table.js'
  import { questionApi } from '@/api/question.js'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import { getEnumList } from '@/utils/enum'
  import EnumView from '@/components/Enum/View/index.vue'
  import CascaderCatalog from '@/components/Cascader/Catalog/index.vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const tableRef = ref()
  const props = defineProps({
    title: {
      type: String,
      default: '手工选题'
    },
    visible: {
      type: Boolean,
      default: false
    },
    excludeIds: {
      type: Array,
      default: undefined
    }
  })

  // 题型
  const activeName = ref(0)
  const tabPanes = ref()
  onMounted(async () => {
    tabPanes.value = await getEnumList('QuestionType')
  })
  const handleTabClick = (tab) => {
    activeName.value = tab.props.name
    query.questionType = tab.props.name
    handleQuery()
  }

  const emit = defineEmits(['close'])

  // 提交
  const handleSubmit = () => {
    // 获取选中的试题
    let questionList = []
    tableRef.value.getSelectionRows().forEach((item) => {
      questionList.push(item)
    })
    if (questionList.length > 0) {
      questionList.forEach((item) => {
        item.questionId = item.id
      })
    }
    emit('close', questionList, 1)
  }

  // 关闭
  const handleClose = () => {
    emit('close', null, 1)
  }

  // 添加试题
  const toQuestionAdd = () => {
    const pathRouter = router.resolve({ path: '/questions/update' })
    window.open(pathRouter.href, '_blank')
  }

  // 基础功能
  const { page, handlePage, query, handleQuery, resetQuery } = useTable(
    {
      page: questionApi.questionPage
    },
    {
      excludeIds: props.excludeIds
    }
  )
</script>
